<template>
  <div>
    <el-dialog title="新增绑定" :visible.sync="showAddStoreBankDialog" center width="770px">
      <el-form :model="storeBankData"  :rules="rules" ref="storeBankData" >



        <!--        <el-form-item label="商家" :label-width="formLabelWidth" prop="name">-->
        <!--          <el-input v-model="storeBankData.store_id" autocomplete="off"></el-input>-->
        <!--        </el-form-item>-->

        <el-form-item label="商家" :label-width="formLabelWidth">
          <el-select v-model="storeBankData.store_id" placeholder="请选择商家">
            <el-option
              v-for="(item,index) in storeList"
              :key="index"
              :label="item.name"
              :value="item.customer_store_id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="银行账号" :label-width="formLabelWidth" prop="number">
          <el-input v-model="storeBankData.number" autocomplete="off"></el-input>
        </el-form-item>

        <!--        <el-form-item label="主行" :label-width="formLabelWidth">-->
        <!--          <el-input v-model="storeBankData.bank" autocomplete="off"></el-input>-->
        <!--        </el-form-item>-->

        <!--        <el-form-item label="支行" :label-width="formLabelWidth">-->
        <!--          <el-input v-model="storeBankData.bank_branch" autocomplete="off"></el-input>-->
        <!--        </el-form-item>-->

        <el-form-item label="选择主行和支行" :label-width="formLabelWidth">
          <el-cascader placeholder="试试搜索：农业银行"
                       :options="bankData"
                       :props="{ value: 'value', label: 'label'}"
                       @change="handleChange"
                       filterable>
          </el-cascader>
        </el-form-item>


      </el-form>


      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDialog">取 消</el-button>
        <el-button type="primary" @click="submitStoreBank('storeBankData')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import store from '@/store'
  import {add} from '@/api/thk/cms/bindStoreBank'
  import {dateFormat} from '@/utils/dateFormat'

  export default {
    name: 'addStoreBank',
    data() {
      return {
        showAddStoreBankDialog: false,
        formLabelWidth: '130px',

        storeBankData: {
          customer_store_bank_account_id: '',
          store_id: '',
          number: '',
          bank: '',
          bank_branch: '',
          date_added: ''
        },

        bankData: [],
        storeList: [],

        rules: {
          number:[
            { required: true, message: '请输入支行名称', trigger: 'blur' },
          ],

        }

      }
    },


    methods: {
      // 判断是否点击了提交
      submitStoreBank(storeBankData){
        this.$refs[storeBankData].validate((valid) => {
          if (valid) {
            this.storeBankData.date_added = dateFormat("YYYY-mm-dd HH:MM:SS", new Date())
            add(store.getters.token,this.storeBankData).then(result => {
              // 增加成功
              this.showAddStoreBankDialog = !this.showAddStoreBankDialog
              this.$message.success('增加成功!')
              this.$parent.getStoreBankData()
            }).catch(error => {
              console.log(error)
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });

      },

      cancelDialog(bankData, storeList){
        this.bankData = bankData
        this.storeList = storeList
        this.showAddStoreBankDialog = !this.showAddStoreBankDialog
      },


      handleChange(value){
        if(value){
          this.storeBankData.bank = value[0]
          this.storeBankData.bank_branch = value[1]

        }
      },
    }
  }
</script>
